<template>
  <Layout>
    <PageHeaderNew :items="items"></PageHeaderNew>
    <div class="row">
      <div class="col-md-12">
        <div class="card">
          <div class="card-body">
            <div class="row">
              <div class="col-lg-6">
                <div class="form-group">
                  <label for="manufacturerbrand">用户名</label>
                  <b-form-input
                    for="text"
                    v-model="userName"
                    placeholder="请输入用户名,用户名就是邮箱地址"
                  ></b-form-input>
                </div>
              </div>
              <div class="col-lg-6">
                <div class="form-group">
                  <label for="price">角色</label>
                  <multiselect
                    v-model="role"
                    :options="roleOptions"
                    placeholder="请选择角色"
                  ></multiselect>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-lg-6">
                <div class="form-group">
                  <label for="manufacturerbrand">密码</label>
                  <b-form-input
                    for="text"
                    v-model="passWord"
                    placeholder="请输入密码"
                  ></b-form-input>
                </div>
              </div>
              <div class="col-lg-6">
                <div class="form-group">
                  <label for="price">姓名</label>
                  <b-form-input
                    for="text"
                    v-model="name"
                    placeholder="请输入用户姓名"
                  ></b-form-input>
                </div>
              </div>
            </div>
            <div class="row" style="padding:0 12px;">
              <b-button variant="primary">添加用户</b-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </Layout>
</template>
<script>
import Layout from "../../layouts/main";
import PageHeaderNew from "@/components/page-header-new";
import Multiselect from "vue-multiselect";
export default {
  components: {
    Layout,
    PageHeaderNew,
    Multiselect,
  },
  data () {
    return {
      items: [
        {
          text: "用户管理",
          url: "/user",
        },{
          text: "添加用户",
          url: "",
        }
      ],
      name: "",
      userName: "",
      passWord: "",
      role: "",
      roleOptions: ["请选择角色"],
    }
  }
}
</script>
<style lang="scss" scoped>
.butn{
  ::v-deep .btn{
    background-color: #252b3b;
    border-color: #252b3b;
    border-radius: 30px;
    display: flex;
    align-items: center;
  }
  ::v-deep .btn-secondary.focus {
    box-shadow: 0 0 0 0.15rem rgb(37 40 58 / 50%);
  }
}
</style>
